<template>
	
	<view>
		
		<view class="content">
			<view class="big-panel">
				<view>{{bigTitle}}</view>
			</view>
			<view class="c-items">
				
				<view class="ci-item" v-for="(item,index) in foods">
					<view class="ciii-idx">{{index+1}}</view>
					<view class="cii-image">
						<image :src="item.img_url"></image>
					</view>
					<view class="cii-title">{{item.title}}</view>
					<view class="cii-assign">
						<view class="ciia-need">{{item.need}}</view>
						<view class="ciia-unit">g/</view>
						<view class="ciia-sum">{{item.sum}}g</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data(){
			return {
				bigTitle:'',
				foods:[],
				food_id:1
			}
		},
		onLoad(option) {
			let that = this;
			option = option || {};
			that.bigTitle = option.bigTitle ? option.bigTitle : '食物';
			that.food_id = option.food_id ? option.food_id : 1;
			that.initFoods();
		},
		methods:{
			initFoods(){
				
				let that = this;
				var images = [
					'https://images.pexels.com/photos/13940670/pexels-photo-13940670.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
					'https://images.pexels.com/photos/18713030/pexels-photo-18713030.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
					'https://images.pexels.com/photos/18601973/pexels-photo-18601973/free-photo-of-m5-vsco.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
				];
				
				/*
				var img_idx = 0;
				var _foods = [];
				for(var i=0;i<10;i++){
					_foods.push({
						title:'我是标题'+i,
						img_url:images[img_idx],
						sum:100,
						need:20
					});
					img_idx++;
					img_idx = img_idx > 2 ? 0 : img_idx
				}*/
				
				var _foods_map = {};
				
				//对应前一页传递过来的ID值1
				var _foods_map_item_1 = [
					{id:1,title:'标题1-1',img_url:'图片地址1',sum:100,need:20},
					{id:2,title:'标题1-2',img_url:'图片地址2',sum:100,need:20},
					{id:3,title:'标题1-3',img_url:'图片地址3',sum:100,need:20},
					{id:4,title:'标题1-4',img_url:'图片地址4',sum:100,need:20}
					//继续添加
				]
				
				//对应前一页传递过来的ID值2
				var _foods_map_item_2 = [
					{id:1,title:'标题2-1',img_url:'图片地址1',sum:100,need:20},
					{id:2,title:'标题2-2',img_url:'图片地址2',sum:100,need:20},
					{id:3,title:'标题2-3',img_url:'图片地址3',sum:100,need:20},
					{id:4,title:'标题2-4',img_url:'图片地址4',sum:100,need:20}
					//继续添加
				]
				
				//对应前一页传递过来的ID值3
				var _foods_map_item_3 = [
					{id:1,title:'标题3-1',img_url:'图片地址1',sum:100,need:20},
					{id:2,title:'标题3-2',img_url:'图片地址2',sum:100,need:20},
					{id:3,title:'标题3-3',img_url:'图片地址3',sum:100,need:20},
					{id:4,title:'标题3-4',img_url:'图片地址4',sum:100,need:20}
					//继续添加
				]
				
				
				_foods_map['1'] = _foods_map_item_1;
				_foods_map['2'] = _foods_map_item_2;
				_foods_map['3'] = _foods_map_item_3;
				
				
				that.foods = _foods_map[that.food_id];
				
			}
		}
	}
	
</script>


<style>
	
	.content{
		background-color: #e5e5e5;
	}
	.big-panel{
		height: 10rem;
		line-height: 10rem;
		font-size: 2rem;
		background-color: #3fbd5c;
		padding-left: 2rem;
		color: white;
	}
	
	.ci-item{
		height: 4rem;
		display: flex;
		flex-direction: row;
		background-color: white;
		margin-bottom: 0.25rem;
		padding: 0.25rem;
		margin: 0.25rem;
		border-radius: .35rem;
		position: relative;
	}
	
	.cii-image{
		width: 3.5rem;
		height: 3.5rem;
		margin-top: 0.25rem;
		flex-shrink: 0;
		position: relative;
	}
	
	.cii-image image{
		width: 100%;
		height: 100%;
		border-radius: 0.35rem;
	}
	
	.cii-title{
		height: 4rem;
		line-height: 4rem;
		width: 100%;
		padding-left: 0.3rem;
		font-weight: bold;
		font-size: 1.1rem;
	}
	
	.cii-assign{
		width: 6rem;
		flex-shrink: 0;
		display: flex;
	}
	
	
	.ciia-need,
	.ciia-unit,
	.ciia-sum{
		width: 2rem;
		flex-shrink: 0;
		height: 4rem;
		line-height: 4rem;
		font-size: 1.0rem;
	}
	
	.ciia-need{
		color: darkgreen;
		text-align: right;
	}
	
	.ciia-sum{
		text-align: left;
		color: gray;
	}
	
	.ciia-unit{
		width: 1rem;
		text-align: center;
		color: gray;
	}
	
	.ciii-idx{
		background-color: springgreen;
		color: white;
		height: 1.0rem;
		width: 1.0rem;
		line-height: 1.0rem;
		position: absolute;
		text-align: center;
		font-size: 0.8rem;
		top: 0.2rem;
		left: 0.2rem;
		z-index: 666;
		border-radius: 0.05rem;
	}
	
	
	
	
	
</style>